<template>
  <div class="body">
    <HwApp :arr="arr" :list="list" :array="array">
      <!-- <ul>
          <li> -->
      <template #header="{ item }">
        <h2>{{ item.title }}</h2>
        <p>{{ item.hot }}</p>
      </template>
      <!-- </li> -->
      <!-- <li>
          <h2>我的收藏</h2>
          <p>654</p>
        </li> -->
      <!-- </li>
        </ul> -->

      <!-- <div class="he">本周热搜 TOP5</div> -->

      <template #main="{ item }">
        <h2>#{{ item.title }}</h2>
        <p>{{ item.hot }}</p>
      </template>

      <!-- <li>
          <h2>#数据挖掘</h2>
          <p>91</p>
        </li>

        <li>
          <h2>#无人机</h2>
          <p>87</p>
        </li>

        <li>
          <h2>#生命科学</h2>
          <p>72</p>
        </li>

        <li>
          <h2>#传感器</h2>
          <p>60</p>
        </li> -->
      <template #footer="{ item }">
        <h2>{{ item.name }}</h2>
        <h3>{{ item.lear }}</h3>
        <p>{{ item.pfs }}</p>
      </template>
    </HwApp>
  </div>
</template>

<script>
import HwApp from './components/HwApp.vue'

export default {
  components: {
    HwApp,
  },
  data() {
    return {
      list: [
        {
          id: '1',
          title: '区块链',
          hot: 98,
        },
        {
          id: '2',
          title: '数据挖掘',
          hot: 91,
        },
        {
          id: '3',
          title: '无人机',
          hot: 98,
        },
        {
          id: '4',
          title: '生命科学',
          hot: 87,
        },
        {
          id: '5',
          title: '传感器',
          hot: '60',
        },
      ],
      arr: [
        {
          id: '6',
          title: '我的赞',
          hot: 1287,
        },
        {
          id: '7',
          title: '我的收藏',
          hot: 654,
        },
      ],
      array: [
        {
          id: '8',
          name: '李国胜',
          lear: '研究领域：机电一体化技术',
          pfs: '哈尔滨工业大学教授',
        },
        {
          id: '8',
          name: '李国胜',
          lear: '研究领域：机电一体化技术',
          pfs: '哈尔滨工业大学教授',
        },
      ],
    }
  },
}
</script>

<style lang="less">
.body {
  width: 430px;
  height: 1000px;
  margin: 0 auto;
  background-color: #f5f6fa;
  padding-left: 20px;
  .header {
    min-height: 120px;
    width: 400px;
    margin-bottom: 20px;
    background-color: #fff;
    ul {
      padding-left: 20px;
      padding-right: 20px;
      li {
        display: flex;
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 20px;
        border-bottom: 1px solid #ccc;
        h2 {
          font-size: 17px;
        }
      }
    }
  }
  .main {
    min-height: 350px;

    width: 400px;
    margin-bottom: 20px;
    background-color: #fff;
    .he {
      height: 30px;
      background: linear-gradient(#187fff, #62c0fc);
      color: #fff;
      line-height: 30px;
      font-size: 20px;
      padding-left: 20px;
    }
    ul {
      padding-left: 20px;
      padding-right: 20px;
      li {
        display: flex;
        justify-content: space-between;
        padding-left: 20px;
        border-bottom: 1px solid #ccc;

        h2 {
          font-size: 17px;
          background-color: #f5f6fa;
        }
      }
    }
  }
  .footer {
    min-height: 400px;
    width: 400px;
    margin-bottom: 20px;
    background-color: #fff;

    .ft {
      background: linear-gradient(#187fff, #62c0fc);
      padding-right: 20px;
      padding-left: 20px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h2 {
        color: #fff;
        line-height: 30px;
        font-size: 20px;
      }
      p {
        color: #fff;
        line-height: 30px;
        font-size: 20px;
      }
    }
    ul {
      // display: flex;

      margin-right: 30px;
      li {
        list-style: none;
        padding-right: 20px;
        border-bottom: 1px solid #ccc;
        h2 {
          font-size: 18px;
          color: black;
        }
        h3 {
          zoom: 0.8;
          color: #61676e;
        }
        p {
          zoom: 0.8;
          color: #61676e;
        }
      }
    }
  
  }
}
</style>
